<template>
  <div class="TabBar">
    <div class="fixed">
      <ul>
        <li v-for="(item,index) in dataList" :key="index" class="list">
          <div @click="tabBar(item.path, item.name, item.type)">
            <span class="icon" :class="{'icon-my':item.type===1,'icon-mall':item.type===2,'icon-announcement':item.type===3,active: isActive === item.type}"></span>
            <span class="name" :class="{active: isActive === item.type}">{{item.textName}}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'TabBar',
  data () {
    return {
      isTime: false,
      dataList: [{
        path: '/my',
        name: 'my',
        className: 'icon-my',
        type: 1,
        textName: '我的'
      }, {
        path: '/mall',
        name: 'mall',
        className: 'icon-mall',
        type: 2,
        textName: '商城'
      }, {
        path: '/announcement/list',
        name: 'announcement',
        className: 'icon-announcement',
        type: 3,
        textName: '公告'
      }]
    };
  },
  props: {
    value: {
      type: Number
    }
  },
  computed: {
    ...mapGetters(['isTabBar']),
    isActive: {
      get: function () {
        return this.value;
      },
      set: function (val) {
        this.$emit('input', val);
      }
    }
  },
  methods: {
    tabBar (url, name, type) {
      this.$router.push({ 'path': url });
    }
  }
};
</script>
<style scoped lang="less">
.TabBar {
  .fixed {
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #fff;
    transform: translateZ(0);
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.06);
  }
  ul {
    display: flex;
    padding: 10px 0 7px;
    li {
      flex: 1;
      text-align: center;
      background-color: #fff;
      padding: 3px 0 0;
      .icon {
        width: 48px;
        height: 48px;
        background-repeat: no-repeat;
        display: inline-block;
        background-position: center center;
        background-size: contain;
      }
      .icon.icon-mall {
        background-image: url('/static/img/icon-mall.png');
      }
      .icon.icon-mall.active {
        background-image: url('/static/img/icon-mall-active.png');
      }
      .icon.icon-announcement {
        background-image: url('/static/img/icon-announcement.png');
      }
      .icon.icon-announcement.active {
        background-image: url('/static/img/icon-announcement-active.png');
      }
      .icon.icon-my {
        background-image: url('/static/img/icon-my.png');
      }
      .icon.icon-my.active {
        background-image: url('/static/img/icon-my-active.png');
      }
      .name {
        font-size: 20px;
        display: block;
        padding: 2px 0 0;
        color: #b1b1b1;
      }
      .name.active {
        color: #446fff;
      }
    }
  }
}
</style>
